<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.thymeleaf.org/thymeleaf-extras-shiro">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>ComputerERP主页</title>
  <link rel="stylesheet" href="/static/js/layui/css/layui.css" media="all">
  <script type="text/javascript" src="/static/js/jquery/jquery-3.5.1.min.js"></script>
  <script type="text/javascript" src="/static/js/layui/layui.js"></script>
</head>
<body>
<div class="layui-layout layui-layout-admin">
  <!--    上方导航栏-->
  <div class="layui-header">
    <div class="layui-logo layui-hide-xs layui-bg-black"><a style="color: #E9E7E7" class="" th:href="@{/admin/main}">ComputerERP</a></div>
    <!-- 头部区域（可配合layui 已有的水平导航） -->
    <!--        <ul class="layui-nav layui-layout-left">-->
    <!--            &lt;!&ndash; 移动端显示 &ndash;&gt;-->
    <!--            <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">-->
    <!--                <i class="layui-icon layui-icon-spread-left"></i>-->
    <!--            </li>-->

    <!--            <li class="layui-nav-item layui-hide-xs"><a href="">nav 1</a></li>-->
    <!--            <li class="layui-nav-item layui-hide-xs"><a href="">nav 2</a></li>-->
    <!--            <li class="layui-nav-item layui-hide-xs"><a href="">nav 3</a></li>-->
    <!--            <li class="layui-nav-item">-->
    <!--                <a href="javascript:;">nav groups</a>-->
    <!--                <dl class="layui-nav-child">-->
    <!--                    <dd><a href="">menu 11</a></dd>-->
    <!--                    <dd><a href="">menu 22</a></dd>-->
    <!--                    <dd><a href="">menu 33</a></dd>-->
    <!--                </dl>-->
    <!--            </li>-->
    <!--        </ul>-->
    <ul class="layui-nav layui-layout-right">
      <li class="layui-nav-item layui-hide layui-show-md-inline-block">
<!--        <a href="javascript:;">-->
<!--&lt;!&ndash;          <img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" class="layui-nav-img">&ndash;&gt;-->
<!--          tester-->
<!--        </a>-->
<!--        <dl class="layui-nav-child">-->
<!--          <dd><a th:href="@{/main/selfinformation}">个人信息</a></dd>-->
<!--          <dd><a href="">退出登录</a></dd>-->
<!--        </dl>-->
      </li>
      <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
        <a href="javascript:;">
          <i class="layui-icon layui-icon-more-vertical"></i>
        </a>
      </li>
    </ul>
  </div>
  <!--左侧导航栏-->
  <div class="layui-side layui-bg-black">
    <div class="layui-side-scroll">
      <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
      <ul class="layui-nav layui-nav-tree " lay-filter="test">
        <li class="layui-nav-item ">
          <a class="" href="javascript:;">进货管理</a>
          <dl class="layui-nav-child">
            <dd><a th:href="@{/main/purchase/pmanagement}">进货入库</a></dd>
            <dd><a th:href="@{/main/purchase/omanagement}">退货出库</a></dd>
            <dd><a th:href="@{/main/purchase/pmanagementorder}">进货单查询</a></dd>
            <dd><a th:href="@{/main/purchase/omanagementorder}">退货单查询</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item layui-nav-itemed">
          <a href="javascript:;">销售管理</a>
          <dl class="layui-nav-child">
            <dd><a th:href="@{/main/sales/salesdelivery}">销售出库</a></dd>
            <dd><a th:href="@{/main/sales/omanagement}">客户退货</a></dd>
            <dd><a th:href="@{/main/sales/salesorder}">销售单查询</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item ">
          <a class="" href="javascript:;">库存管理</a>
          <dl class="layui-nav-child">
            <dd><a th:href="@{/main/warehouse/damage}">商品报损/报溢</a></dd>
            <dd><a th:href="@{/main/warehouse/alarm}">库存报警</a></dd>
            <dd><a th:href="@{/main/warehouse/brimordamage}">报损报溢查询</a></dd>
            <dd><a th:href="@{/main/warehouse/querywarehouse}">当前库存查询</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item">
          <a class="" th:href="@{/main/report/report}">统计报表</a>
        <li class="layui-nav-item ">
          <a class="" th:href="@{/main/manage/manage}">系统设置</a>
        </li>
      </ul>
    </div>
  </div>
  <!--主体区域-->
  <!--    <div class="layui-body">-->
  <!--        &lt;!&ndash; 内容主体区域 &ndash;&gt;-->
  <!--&lt;!&ndash;        <div style="padding: 15px;">内容主体区域。记得修改 layui.css 和 js 的路径</div>&ndash;&gt;-->
  <!--    </div>-->

  <div class="layui-tab layui-tab-brief">
    <div class="layui-body layui-tab-content" style="background-image: url(/static/images/bg2.jpg); height: 930px; background-repeat: no-repeat; ">
      <div class="layui-tab-item layui-show">
        <div class="layui-main">
          <div style="margin:0 auto; max-width: 1140px;">
            <div class="layui-col-md10 layui-col-md-offset1">
              <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                <legend>客户退单出库</legend>
              </fieldset>

              <form class="layui-form" action="">
                <div class="layui-form-item">
                  <div class="layui-inline">
                    <label class="layui-form-label" style="width: 50px">订单ID</label>
                    <div class="layui-input-inline " id="selectSaleOrderId" style="overflow: visible; width: 180px">
                      <select name="modules" class="selectSaleOrderId" lay-verify="required" lay-search="">
                        <option value="">直接选择或搜索选择</option>
                        <option value="1">订单1</option>
                        <option value="2">订单2</option>
                      </select>
                    </div>
                    <label class="layui-form-label" style="width: 50px">零件名</label>
                    <div class="layui-input-inline " id="selectLingJianName" style="overflow: visible; width: 180px">
                      <select name="modules" class="selectLingJianName" lay-verify="required" lay-search="">
                        <option value="">直接选择或搜索选择</option>
                        <option value="1">零件1</option>
                        <option value="2">零件2</option>
                      </select>
                    </div>
                    <label class="layui-form-label" style="width: 60px">客户名</label>
                    <div class="layui-input-inline " id="selectCustomerName" style="overflow: visible; width: 180px">
                      <select name="modules" class="selectCustomerName" lay-verify="required" lay-search="">
                        <option value="">直接选择或搜索选择</option>
                        <option value="1">客户1</option>
                        <option value="2">客户2</option>
                      </select>
                    </div>
                    <div class="layui-inline ">
                      <div class="layui-btn-container">
                        <button type="button" id="selectbtn" class="layui-btn layui-btn-normal layui-btn-radius layui-btn-sm" style="width:50px;height: 38px;">查找</button>
                      </div>
                    </div>
                  </div>
                </div>
              </form>

              <!--                            layui.use('form', function(){-->
              <!--                            var form = layui.form; //只有执行了这一步，部分表单元素才会自动修饰成功-->
              <!--                            //……-->
              <!--                            //如果你的 HTML 是动态生成的，自动渲染就会失效-->
              <!--                            //因此你需要在相应的地方，执行下述方法来进行渲染-->
              <!--                            form.render();-->
              <!--                            });-->
              <div class="layui-form">
                <table class="layui-table" id="saleOrderTable">
                  <thead>
                  <tr>
                    <th>订单ID</th>
                    <th>销售零件</th>
                    <th>客户名</th>
                    <th>销售员名</th>
                    <th>零件数量</th>
                    <th>交易金额</th>
                    <th>订单状态</th>
                    <th>下单日期</th>
                    <!--                                        <shiro:hasAnyRoles name="manager">-->
                    <th>操作</th>
                    <!--                                        </shiro:hasAnyRoles>-->
                  </tr>
                  </thead>
                  <tbody>
                  <tr>
                    <td>订单的id</td>
                    <td>进货的零件</td>
                    <td>客户1</td>
                    <td>销售员1号</td>
                    <td>200</td>
                    <td>200*零件单价</td>
                    <td>未交付</td>
                    <td>2022-5-5</td>
                    <td>
                      <div class="layui-btn-container">
                        <button type="button" id="outbtn" class="layui-btn layui-btn-normal layui-btn-radius layui-btn-sm">退单</button>
                      </div>
                    </td>
                  </tr>
                  </tbody>
                </table>
              </div>
            </div>
            <!--                            这里写主体内容-->
            <!--                            layui-col-md 占据空间-->
            <!--                            layui-col-md-offset 偏移空间-->
            <!--                            <div class="layui-col-md10 layui-col-md-offset1">-->
            <!--                            </div>-->
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  //JS
  layui.use(['element', 'layer', 'util','laydate'], function(){
    var element = layui.element
            ,layer = layui.layer
            ,util = layui.util
            ,laydate = layui.laydate
            ,$ = layui.$;

    //日期
    laydate.render({
      elem: '#date'
    });
    // laydate.render({
    //     elem: '#date1'
    // });

    //头部事件
    util.event('lay-header-event', {
      //左侧菜单事件
      menuLeft: function(othis){
        layer.msg('展开左侧菜单的操作', {icon: 0});
      }
      ,menuRight: function(){
        layer.open({
          type: 1
          ,content: '<div style="padding: 15px;">处理右侧面板的操作</div>'
          ,area: ['260px', '100%']
          ,offset: 'rt' //右上角
          ,anim: 5
          ,shadeClose: true
        });
      }
    });
  });
  $(function () {

    requestdata();
    //数据预加载
    function requestdata(){
        $.ajax({
          url:"/main/sales/login/omanagement",
          type: "post",
          datatype:"json",
          success:function (data) {

            $('#selectSaleOrderId').empty();//清空selectPurchaseOrderId内容
            console.log(data);
            let select1 =  '<select name="modules" class="selectSaleOrderId" lay-verify="required" lay-search="">';
            select1 += '<option value="99">直接选择或搜索选择</option>';
            for (let i = 0; i < data.saleOrders.length; i++){
              select1 += '<option value='+i+'>'+data.saleOrders[i].id+'</option>';
              console.log(data.saleOrders[i].id);
            }
            select1 += '</select>';
            $("#selectSaleOrderId").append(select1);//更新获取到的订单id

            $('#selectLingJianName').empty();//清空selectLingJianName内容
            console.log(data);
            let select2 =  '<select name="modules" class="selectLingJianName" lay-verify="required" lay-search="">';
            select2 += '<option value="99">直接选择或搜索选择</option>';
            for (let i = 0; i < data.lingjians.length; i++){
              select2 += '<option value='+i+'>'+data.lingjians[i].name+'</option>';
              console.log(data.lingjians[i].name);
            }
            select1 += '</select>';
            $("#selectLingJianName").append(select2);//更新获取到的零件名

            $('#selectCustomerName').empty();//清空selectLingJianName内容
            console.log(data);
            let select3 =  '<select name="modules" class="selectCustomerName" lay-verify="required" lay-search="">';
            select3 += '<option value="99">直接选择或搜索选择</option>';
            console.log(data.customers.length);
            for (let i = 0; i < data.customers.length; i++){
              select3 += '<option value='+i+'>'+data.customers[i].name+'</option>';
              console.log(data.customers[i].name);
            }
            select1 += '</select>';
            $("#selectCustomerName").append(select3);//更新获取到的零件名
            $("#selectbtn").click();
            renderForm();
            console.log(data);
          }
        });
    }
    //查找功能
    $("#selectbtn").click(function(){
      var param = {"id":$(".selectSaleOrderId").find("option:selected").text(),"lingjianName":$(".selectLingJianName").find("option:selected").text(),"customerName":$(".selectCustomerName").find("option:selected").text()};
      console.log(param);
      $.ajax({
        url: "/main/sales/select/omanagement",
        data:param,
        type:"post",
        datatype: "json",
        success:function (data){
          console.log(data);
          //  清空原来的表格内容（保留表头）==>移除第二行开始的tr
          $('#saleOrderTable tr:gt(0)').remove();
          if(data.result==1){
            let tr = '<tr>';
            tr += '<td>' + data.saleOrders.id + '</td>';
            for (i=0;i<data.lingJians.length;i++){
              if (data.lingJians[i].id==data.saleOrders.lingjianId){
                tr += '<td>' + data.lingJians[i].name + '</td>';
              }
            }
            for (i=0;i<data.customers.length;i++){
              if (data.customers[i].id==data.saleOrders.customerId){
                tr += '<td>' + data.customers[i].name + '</td>';
              }
            }
            for (i=0;i<data.users.length;i++){
              if (data.users[i].id==data.saleOrders.userId){
                tr += '<td>' + data.users[i].name + '</td>';
              }
            }
            tr += '<td>' + data.saleOrders.number + '</td>';
            tr += '<td>' + data.saleOrders.totalAmount + '</td>';
            tr += '<td>已下单</td>';
            if (data.saleOrders.createTime==null){
              tr += '<td>' + "" + '</td>';
            }else {
              tr += '<td>' + data.saleOrders.createTime + '</td>';
            }
            // tr += '<td>' + data.purchaseOrders[i].deadline + '</td>';
            tr += '<td> <div class="layui-btn-container"> <button type="button" id="outbtn" class="layui-btn layui-btn-normal layui-btn-radius layui-btn-sm" data-id='+data.saleOrders.id+'>退单</button> </div> </td>'
            tr += '</tr>';
            $('#saleOrderTable').append(tr); // 一行图书数据转换的tr标签添加到table中
          }else {
            for (let i = 0; i < data.saleOrders.length; i++){
              let tr = '<tr>';
              tr += '<td>' + data.saleOrders[i].id + '</td>';
              for (j=0;j<data.lingJians.length;j++){
                // console.log(data.lingJians[j].id);
                // console.log(data.saleOrders.lingjianId);
                if (data.lingJians[j].id==data.saleOrders[i].lingjianId){
                  tr += '<td>' + data.lingJians[j].name + '</td>';
                }
              }
              for (j=0;j<data.customers.length;j++){
                if (data.customers[j].id==data.saleOrders[i].customerId){
                  tr += '<td>' + data.customers[j].name + '</td>';
                }
              }
              for (j=0;j<data.users.length;j++){
                if (data.users[j].id==data.saleOrders[i].userId){
                  tr += '<td>' + data.users[j].name + '</td>';
                }
              }
              tr += '<td>' + data.saleOrders[i].number + '</td>';
              tr += '<td>' + data.saleOrders[i].totalAmount + '</td>';
              tr += '<td>已下单</td>';
              if (data.saleOrders[i].createTime==null){
                tr += '<td>' + "" + '</td>';
              }else {
                tr += '<td>' + data.saleOrders[i].createTime + '</td>';
              }
              // tr += '<td>' + data.purchaseOrders[i].deadline + '</td>';
              tr += '<td> <div class="layui-btn-container"> <button type="button" id="outbtn" class="layui-btn layui-btn-normal layui-btn-radius layui-btn-sm" data-id='+data.saleOrders[i].id+'>退单</button> </div> </td>'
              tr += '</tr>';

              $('#saleOrderTable').append(tr); // 一行图书数据转换的tr标签添加到table中
            }
          }
          renderForm();
        }
      });
    });
    //退单功能
    $(document).on("click","#outbtn",function (){
      //输入退单原因
      var id=$(this).data("id");
      layer.prompt({
        title: "请输入退单原因并确认",
        formType: 0
      },function (value, index) {
        layer.close(index);
        var param = {"msg":value,"id":id}
        $.ajax({
          url:"/main/sales/update/omanagement",
          data: param,
          type:"post",
          datatype:"json",
          success:function(data){
           console.log(data);
           if (data==1){
             layer.msg("退单成功");
           }else{
             layer.msg("未知错误");
           }
            requestdata();
          }
        });
      });
    });
    //渲染
    function renderForm() {
      layui.use('form', function () {
        var form = layui.form;
        form.render();
      });
      return;
    }
  });
</script>
</body>
</html>